<template>
    <div class="cont">
        <div class="top">
            <svg width="130" height="26">
                <image xlink:href="./img/logo_black.svg" src="./img/logo_black.png" width="130" height="26" />
            </svg>
        </div>
        <div class="order">
            <div>
                <span class="txt1">
                    订单编号：{{outTradeNo}}<br>
                    订单类型：账户充值
                </span>
                <span class="txt2 right">应付金额 <span class="txt3">￥{{qrCode.consume}}</span> 元</span>
            </div>
        </div>
        
        <div class="payCode">
            <div class="wxLogo">
                <svg width="154" height="40">
                    <image xlink:href="./img/wechat_icon.svg" src="./img/wechat_icon.png" width="154" height="40" />
                </svg>
            </div>
            <div class="code">
                <img class="codeImg" :src="payCode" alt="">
                <div class="point">
                    <svg width="50" height="50">
                        <image xlink:href="./img/scanning_icon.svg" src="./img/scanning_icon.png" width="50" height="50" />
                    </svg>
                    <p>请使用微信扫一扫<br>扫描二维码支付</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
    export default {
        data() {
            return {
                qrCode: {
                    accountId: null,
                    levelId: null,
                    spbillIp: null,
                    consume: null,
                },
                payCode: '',
                agingCode: null,
                outTradeNo: '',
            }
        },
        mounted() {
            var vm = this;
            vm.qrCode = JSON.parse(sessionStorage.getItem('order'))
            vm.createRecharge();
        },
        methods: {
            recharge() {

            },
            // 创建订单
            createRecharge() {
                var vm = this;
                vm.$http({
                    method: 'GET',
                    url: utils.UrlConfig.unifiedorder + '?token=' + $cookieStore.getAll('home_').tokenKey,
                    params: {
                        accountId: vm.qrCode.accountId,
                        levelId: vm.qrCode.levelId,
                        spbillIp: vm.qrCode.spbillIp,
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        return;
                    }
                    vm.outTradeNo = res.data.data;
                    vm.payCode = utils.UrlConfig.qrcode + '?token=' + $cookieStore.getAll('home_').tokenKey + '&outTradeNo=' + res.data.data;
                    vm.checkRecharge();
                })
            },
            // 检测支付
            checkRecharge() {
                var vm = this;
                var time = 0;
                var qrNum = 0;
                clearInterval(vm.agingCode);
                vm.agingCode = setInterval(function(){
                    if (time >= 60) {
                        vm.$message.error('订单失效');
                        clearInterval(vm.agingCode);
                        vm.$router.push({path: '/walletManagement/createRecharge'})
                    }
                    if (qrNum >= 3) {
                        qrNum = -1;
                        vm.$http({
                            method: 'GET',
                            url: utils.UrlConfig.check,
                            params: {
                                token: $cookieStore.getAll('home_').tokenKey,
                                outTradeNo: vm.outTradeNo
                            }
                        }).then(function(res) {
                            if (res.data == 'success') {
                                clearInterval(vm.agingCode);
                                sessionStorage.removeItem('order')
                                vm.$message.success('充值成功');
                                vm.$router.push({path: '/walletManagement'})
                            }
                        })
                    }
                    qrNum++;
                    time++;
                }, 1000)
            }
        }
    }
</script>

<style scoped>
.cont {
    height: 100%;
    background: #fff;
}

.top {
    height: 70px;
    padding: 22px 0 0 75px;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
}

.order {
    width: 100%;
    height: 94px;
    box-sizing: border-box;
    background: #f0f2f5;
}

.order>div {
    width: 888px;
    margin:0 auto;
}

.txt1 {
    font-size: 16px;
    line-height: 25px;
    float: left;
    margin-top: 22px;
    color: #333333;
}

.txt2 {
    font-size: 14px;
    line-height: 94px;
    color: #667988;
}

.txt3 {
	color: #f37161;
	font-size: 20px;
}

.payCode {
    width: 900px;
    height: 517px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
}

img {
    float: left;
}

.wxLogo {
    width: 145px;
    height: 40px;
    float: left;
    margin-top: 40px;
}

.code {
    width: 260px;
    height: 366px;
    overflow: hidden;
    margin-top: 80px;
    display: inline-block;
}

.codeImg {
    width: 260px;
    height: 260px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border: 1px solid #c1cad8;
}

.point {
    width: 260px;
    height: 86px;
    float: left;
    background: #445f85;
    padding-top: 18px;
    text-align: center;
}

.point p{
    display: inline-block;
    text-align: left;
    margin-left: 16px;
	color: #fcfeff;
}

.point svg, .point p, .point img {
    vertical-align: middle;
}
</style>
